<template>
  <div class="content">
    <div class="list">
      <!-- 评论我的 -->
      <div class="listCon" v-for="(item, index) in fromMeS" :key="(index+1)*4">
        <div class="header">
          <div class="header_l">
            <img :src="'http://niu.icrobot.cn/'+item.userHead" alt="">
            <div class="info">
              <div class="name">{{item.username}}（{{item.dianzanUserdep}}）</div>
              <div class="date">{{item.createTime}}</div>
            </div>
          </div>
        </div>
        <div class="body">
          {{item.commentContent}}
        </div>
        <div class="footer" @click="toDetail(item)">
          <div class="footer_left">
            <!-- 视频预览缩略图 -->
            <img src="/img/relatedToMe/videoListImg.png" alt="" v-if="item.type == '备课视频' || item.type == '精彩视频'">
            <!-- 图片预览缩略图 -->
            <img :src="'http://niu.icrobot.cn/'+item.videoFile" alt="" v-if="item.type == '手写教案'">
          </div>
          <div class="footer_right">
            <div class="from">@{{item.submituserName}}（{{item.submitUserdep}}）</div>
            <div class="type">#{{item.type}}#</div>
          </div>
        </div>
      </div>
      <!-- 回复我的 -->
      <div class="listCon" v-for="(item, index) in toMes" :key="(index+1)*5">
        <div class="header">
          <div class="header_l">
            <img :src="'http://niu.icrobot.cn/'+item.userHead" alt="">
            <div class="info">
              <div class="name">{{item.username}}（{{item.dianzanUserdep}}）</div>
              <div class="date">{{item.createTime}}</div>
            </div>
          </div>
        </div>
        <div class="body">
          <span>回复</span> {{item.commentContent}}
        </div>
        <div class="footer" @click="toDetail(item)">
          <div class="footer_left">
            <!-- 视频预览缩略图 -->
            <img src="/img/relatedToMe/videoListImg.png" alt="" v-if="item.type == '备课视频' || item.type == '精彩视频'">
            <!-- 图片预览缩略图 -->
            <!-- <img :src="'http://niu.icrobot.cn/'+item.videoFile" alt=""> -->
          </div>
          <div class="footer_right">
            <div class="from">@{{item.submituserName}}（{{item.submitUserdep}}）</div>
            <div class="type">#{{item.type}}#</div>
          </div>
        </div>
      </div>
      <!-- 点赞的 -->
      <div class="listCon" v-for="(item, index) in icrobotDianzans" :key="(index+1)*6">
        <div class="header">
          <div class="header_l">
            <img :src="'http://niu.icrobot.cn/'+item.userHead" alt="">
            <div class="info">
              <div class="name">{{item.username}}（{{item.dianzanUserdep}}）</div>
              <div class="date">{{item.createTime}}</div>
            </div>
          </div>
        </div>
        <div class="body">
          赞了这条消息
          <img src="/img/relatedToMe/zaned.png" alt="">
        </div>
        <div class="footer">
          <div class="footer_left">
            <!-- 视频预览缩略图 -->
            <img src="/img/relatedToMe/videoListImg.png" alt="" v-if="item.type == '备课视频' || item.type == '精彩视频'">
            <!-- 图片预览缩略图 -->
            <img :src="'http://niu.icrobot.cn/'+item.videoFile" alt="">
          </div>
          <div class="footer_right">
            <div class="from">@{{item.submituserName}}（{{item.submitUserdep}}）</div>
            <div class="type">#{{item.type}}#</div>
          </div>
        </div>
      </div>
    </div>
    <div class="haveNoData" v-if="fromMeS.length <= 0">没有更多了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 评论我的
      fromMeS: [],
      // 回复我的
      toMes: [],
      // 点赞的
      icrobotDianzans: [],
    };
  },
  mounted() {
    this.queryAboutMe();
  },
  methods: {
    queryAboutMe() {
      (async () => {
        const { data } = await this.get("/approve/beRelatedToMe", {
          userId: localStorage.getItem("id"),
          status: 1
        });
        this.toMes = data.toMes;
        this.icrobotDianzans = data.icrobotDianzans;
        for (var i=0; i<data.fromMeS.length; i++) {
          if (data.fromMeS[i].username != localStorage.getItem("userName")) {
            this.fromMeS.push(data.fromMeS[i]);
          }
        }
        // this.fromMeS = data.fromMeS;
      })();
    },
    toDetail(ele) {
      this.updatePingLunDeleteStatus(ele.id);
      // 携带参数过去查询 携带参数  弹出评论框   回复具体的人
      this.$router.push({
        path: "/MoreCom",
        query: {
          taskId: ele.taskId,
          from: "与我相关",
          importantId: ele.id,
        },
      });
    },
    // 点赞的消息进入与我相关的页面就视为已读  评论我的和回复我的点击进入详情视为已读
    updatePingLunDeleteStatus(id) {
      (async () => {
        const { data } = await this.get("/approve/updatePingLunDeleteStatus", {
          id: id
        });
      })();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100%;
  background-color: #edeff0;
  font-size: 0.1rem;
  .list {
    .listCon {
      width: 7.5rem;
      margin-bottom: 0.1rem;
      background-color: #fff;
      padding: 0.19rem 0.24rem;
      box-sizing: border-box;
      .header {
        .header_l {
          display: flex;
          align-items: center;
          img {
            width: 0.72rem;
            height: 0.72rem;
            margin-right: 0.17rem;
            border-radius: 50%;
          }
          .info {
            .name {
              font-size: 0.26rem;
              line-height: 0.26rem;
              font-family: PingFang SC;
              font-weight: bold;
              color: #333333;
            }
            .date {
              margin-top: 0.11rem;
              font-size: 0.22rem;
              line-height: 0.22rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: #7e7e7e;
            }
          }
        }
      }
      .body {
        margin-top: 0.1rem;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0.9rem;
        font-size: 0.26rem;
        line-height: 0.35rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        span {
          color: #2d9dff;
        }
        img {
          width: 0.25rem;
          height: 0.26rem;
        }
      }
      .footer {
        margin-top: 0.18rem;
        width: 7.02rem;
        height: 1.44rem;
        background: #f2f4f5;
        display: flex;
        align-items: center;
        .footer_left {
          margin-right: 0.3rem;
          img {
            width: 1.44rem;
            height: 1.44rem;
            border-radius: 0.06rem;
          }
        }
        .footer_right {
          .from {
            font-size: 0.26rem;
            line-height: 0.26rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
          }
          .type {
            font-size: 0.24rem;
            line-height: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #2d9dff;
            margin-top: 0.16rem;
          }
        }
      }
    }
  }
  .haveNoData {
    width: 100%;
    text-align: center;
    margin-top: 0.5rem;
    font-weight: bolder;
    font-size: 0.24rem;
  }
}
</style>